<template>
	<view class="live__item flex"
	@click="onClickToLiveDetails"
	>
		
		<image :src="data.cut_path" mode="aspectFill" class="live__item-img" />
		<!-- 直播缩略图 -->
		
		<!-- 直播标题 -->
		<view class="live__item-desc flex-column">
			<view class="flex-column live__item-desc-box">
				<text class="live__item-title">{{data.title}}</text>
				<text class="live__item-date">{{data.live_date}}</text>
				<text class="live__item-type">类型：{{data.live_type}}</text>
			</view>
			
			<view class="flex live__item-desc-box">
				<text class="live__item-name">{{data.club_name}}</text>
				<text class="live__item-status" v-if="data.state_id===3">已结束</text>
			</view>
		</view>
		

	</view>
</template>

<script setup>
// import {defineProps} from 'vue'

const props = defineProps({
	data:Object
})

function onClickToLiveDetails(){
	console.log('单个liveItem：',props.data.id)
	console.log('跳转到直播详情页!')
	// console.log('跳转前页面的数据：',props.data)
	const params = {
		id:props.data.id
	}
	uni.navigateTo({
		url:`/pages/liveDetails/liveDetails?id=${params.id}`
		// url:`/pages/details/details?id=${params.id}`
	})
}
</script>

<style lang="scss" scoped>
.live__item{
	width: 100%;
	height: 292rpx;
	background-color: #fff;
	margin-bottom: 20rpx;
	
	&-img{
		width: 220rpx;
		height: 252rpx;
		flex-shrink: 0;
		margin-right: 16rpx;
	}
	
	&-desc{
		// width: ;
		height: 252rpx;
		justify-content: space-between;
		
		&-box{
			justify-content: space-between;
		}
	}
	
	&-title{
		font-size: 30rpx;
		color: #2b2b2b;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	&-date{
		font-size: 26rpx;
		color: #28292a;
	}
	
	&-type{
		font-size: 26rpx;
		color: #28292a;
	}
	
	&-name{
		font-size: 26rpx;
		color: #28292a;
		width: 284rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	&-status{
		font-size: 26rpx;
		color: #fe5100;
	}
}
</style>